<template>
  <div class="topBar flex">
    <div class="lefts flex">
      <div @click="flag=!flag" :class="[flag?'showFlag':'']">
        <div class="icon flex">
          <i class="iconfont icon-keypadl1"></i>
        </div>
        <div :style="{'height':H}" v-show="flag" class="application"></div>
      </div>
      <div class="bread flex">
        <template v-if="bread && bread.firstName">
          <router-link to>{{bread.firstName}}</router-link>
        </template>
        <template v-if="bread && bread.secondName">
          <i class="iconfont icon-mianbaoxie"></i>
          <router-link to>{{bread.secondName}}</router-link>
        </template>
        <template v-if="bread && bread.thirdName">
          <i class="iconfont icon-mianbaoxie"></i>
          <router-link to>{{bread.thirdName}}</router-link>
        </template>
        <template v-if="bread && bread.fourthName">
          <i class="iconfont icon-mianbaoxie"></i>
          <router-link to>{{bread.fourthName}}</router-link>
        </template>
      </div>
    </div>
    <div class="rights flex">
      <div class="img">
        <el-input v-model="search" size="mini" class="search"></el-input>
        <img :src="img" alt />
      </div>
      <div class="icon flex">
        <img :src="item.img" alt v-for="(item,index) in icons" :key="index" />
        <template>
          <i class="iconfont icon-touxiang" @click="touxiangFun(item)"></i>
          <div class="touxiang" v-show="touxiangFlag">
            <p>{{userName}}</p>
            <p @click="logout">注销</p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Cookies from "js-cookie";
export default {
  computed: {
    ...mapState({
      breadName: state => state.menu.breadName,
      navTree: state => state.menu.navTree
    })
  },
  data() {
    return {
      H: window.innerHeight,
      icons: [
        {
          img: require("../../assets/icon/bangzhu.png")
        },
        {
          img: require("../../assets/icon/xinzeng.png")
        },
        {
          img: require("../../assets/icon/shezhi.png")
        }
      ],
      bread: {}, //面包屑
      flag: false,
      touxiangFlag: false, //头像点击显示注销和姓名的模块
      userName: "", //用户名
      search: "",
      img: require("../../assets/icon/sousuo.png")
    };
  },
  watch: {
    breadName(val) {
      if (this.breadName != null) {
        this.bread = JSON.parse(this.breadName);
      } else {
        this.bread = {
          firstName: "首页"
        };
      }
    }
  },
  methods: {
    //显示注销和头像
    touxiangFun(item) {
      this.touxiangFlag = !this.touxiangFlag;
    },
    //获取角色名
    getName() {
      let that = this;
      this.utils.request.sysUserQueryPage(
        { id: localStorage.getItem("userId") },
        function(data) {
          if (
            data &&
            data.data &&
            data.data.rows[0] &&
            data.data.rows[0].username
          ) {
            that.userName = data.data.rows[0].username;
          }
        }
      );
    }, // 退出登录
    logout() {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("user");
          this.deleteCookie("token");
          localStorage.removeItem("token");
          localStorage.removeItem("id");
          localStorage.removeItem("isLogin");
          this.$store.state.tab.mainTabs = [];
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    // 删除cookie
    deleteCookie(name) {
      Cookies.remove(name);
    }
  },
  mounted() {
    this.bread = JSON.parse(this.breadName);
    this.getName();
  }
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topBar {
  height: 48px;
  line-height: 48px;
  background: #405089;
  .showFlag {
    z-index: 99999;
    background: #fff;
    width: 320px;
    height: 100%;
    padding: 8px;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    .icon {
      color: #333;
      z-index: 9;
      &:hover {
        background: #f8f8f8;
      }
    }
  }
  a {
    display: block;
  }
  img {
    width: 18px;
    height: 18px;
    margin: 0 auto;
  }
  .lefts {
    color: #e7e7e7;
    justify-content: flex-start;
    .icon {
      width: 48px;
      height: 48px;
      line-height: 48px;
      justify-content: center;
    }
    .bread {
      a {
        padding: 0 0.6em;
        font-size: 14px;
        letter-spacing: 1px;
      }
      img {
        width: 12px;
        height: 12px;
      }
    }
    a {
      color: #e7e7e7;
    }
    a:hover,
    .icon:hover,
    .iconfont:hover {
      cursor: pointer;
      color: #fff;
    }
  }
  .rights {
    color: #fff;
    .icon {
      height: 48px;
      line-height: 48px;
      img,
      i {
        margin-right: 12px;
      }
    }
    .search {
      margin-right: 80px;
      position: relative;
    }
    .img {
      .el-input {
        width: auto;
        /deep/ .el-input__inner {
          padding: 0 10px 0 34px;
        }
      }
      position: relative;
      img {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
      }
    }
  }
  a:hover,
  .icon:hover {
    cursor: pointer;
    color: #e7e7e7;
  }
  a:active {
    color: #25a4e4;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  .touxiang {
    min-width: 300px;
    background: #fff;
    position: fixed;
    right: 0;
    top: 48px;
    color: #666;
    z-index: 999;
    box-shadow: 0px 3px 8px #eaeaea;
    p {
      margin: 0;
      line-height: 35px;
      text-align: left;
      padding: 0 10px;
      &:hover {
        color: #333;
      }
    }
  }
}
</style>